{include file="$header" /}
<section class="mk-cms-warp">
    <aside class="aside">
        <section class="aside-wrap">
            <div class="side-title">{{lang('Categories')}}</div>
            <el-tree :data='{:json_encode(get_catalog_child($catalog.class1))}'>
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <a :href="data.url">{{data.title}}</a>
                </span>
            </el-tree>
        </section>
        <section class="aside-wrap">
            <div class="side-title">{{lang("Featured products")}}</div>
            <div class="side-product">
                <mk-swiper
                    direction="vertical" 
                    :between="0"
                    :pagination="false"
                    :list='{:json_encode(get_product_list(["isrecommend"]))}'>
                    <template v-slot:item="{ item }">
                        <a :href="item.url">
                            <img :src="item.cover"/>
                            <span>{{item.title}}</span>
                        </a>
                    </template>
                </mk-swiper>
            </div>
        </section>
    </aside>
    <div class="main">
        <div class="main-title">
            <span>{$single.title}</span>
            <div style="position: absolute;right: 0;">
                <el-button 
                    class="mk-cms-collection" 
                    size="small" 
                    @click="collectionPush()" 
                    :loading="collectionLoading">
                    {{single.collection === 0 ? lang('Click collection') : lang('Unfavorite')}}
                </el-button>
            </div>
        </div>
        <div class="main-content">
            <el-row :gutter="30">
                <el-col :sm="12" md="24">
                    <mk-swiper 
                        class="zoom" 
                        :list='{:json_encode($single.images)}' 
                        :pagination="false" 
                        :navigation="false" 
                        :thumbs="true" 
                        :thumbs-slides="5">
                    </mk-swiper>
                </el-col> 
                <el-col :sm="12" md="24">
                    <div class="product-spec-warp">
                        <h3>{{lang("Product specifications")}}:</h3>
                        <div class="mk-cms-product-spec" v-if="single.spec_type === 1">
                            <div 
                                class="spec"
                                v-for="(item,index) in single.spec" 
                                :key="index">
                                <div class="spec-title" :style="{lineHeight: size+'px'}">{{item.title}}：</div>
                                <div 
                                    class="spec-item"
                                    v-for="(v,k) in item.value" 
                                    :key="k"
                                    :style="{width: size+'px', height: size+'px'}"
                                    :class="{'spec-active': skuTitle.indexOf(v.title) !== -1}"
                                    @click="clickSpec(index, v)">
                                    <img :src="v.cover" v-if="v.cover !== ''" :title="v.title">
                                    <span v-else>{{v.title}}</span>
                                </div>
                            </div>
                            <div class="info">
                                <p><span class="title">{:lang('price')}：</span><span class="price">{{price}}</span>{:lang('RMB')}</p>
                                <p><span class="title">{:lang('stock')}：</span><span class="stock">{{stock}}</span></p>
                            </div>
                        </div>
                    </div>
                    <div class="product-parameter-warp">
                        <h3>{{lang("Product parameters")}}:</h3>
                        {volist name="single.parameter" id="vo"}
                        <p class="item"><span>{$vo.title}:</span>{$vo.value}</p>
                        {/volist}
                    </div>
                </el-col>
            </el-row>
            <div class="mk-next-prev-page">
                {empty name="prev"}
                <div>{{lang("prev page")}}：<el-link disabled>{{lang("empty")}}</el-link></div>
                {else/}
                <div>{{lang("prev page")}}：<el-link type="primary" href="{$prev['url']}">{$prev['title']}</el-link></div>
                {/empty}
                {empty name="next"}
                <div>{{lang("next page")}}：<el-link disabled>{{lang("empty")}}</el-link></div>
                {else/}
                <div>{{lang("next page")}}：<el-link type="primary" href="{$next['url']}">{$next['title']}</el-link></div>
                {/empty}
            </div>
        </div>
        <el-tabs type="card" style="margin:30px 0">
            <el-tab-pane label="{:lang('Product Details')}">
                {$single.content|raw}
            </el-tab-pane>
            <el-tab-pane label="{:lang('Product parameter')}">
                <div class="product-parameter-warp">
                    {volist name="single.parameter" id="vo"}
                    <p class="item"><span>{$vo.title}:</span>{$vo.value}</p>
                    {/volist}
                </div>
            </el-tab-pane>
        </el-tabs>
        <!-- 留言组件 -->
        <mk-form :id="6" :submit-title="lang('SEND INQUIRY')"></mk-form>
        <!-- 关联产品 -->
        <div class="main-title" style="margin-top: 30px">
            <span>{{lang("Related products")}}</span>
        </div>
        <!-- 收藏组件 -->
        <mk-swiper
            class="related" 
            :list='{:json_encode($single.related)}' 
            :pagination="false">
            <template v-slot:item="{ item }">
                <a :href="item.url">
                    <img :src="item.cover"/>
                    <span>{{item.title}}</span>
                </a>
            </template>
        </mk-swiper>
    </div>
</section>
{include file="$component" /}
<script type="text/javascript">
    var single = {:json_encode($single)};
    new Vue({
        el: '#app',
        data() {
            return {
                single: single,
                collectionUrl: "cms/user/productCollectionPush",
                collectionLoading: false,
                // 规格
                size: 50,
                price: single.sale_price,
                stock: single.stock,
                skuTitle: [],
                sku: "",
            }
        },
        methods: {
            /**
             * 取消/收藏
             */
            collectionPush() {
                let self = this;
                self.collectionLoading = true;
                request.post(self.collectionUrl, {id: self.single.id}, function(res) {
                    self.collectionLoading = false;
                    self.$message({ showClose: true, message: res.message, type: res.status});
                    if (res.status === 'success') {
                        self.single = Object.assign({}, self.single, {collection: self.single.collection === 0 ? 1 : 0});
                    }
                });
            },
            /**
             * 点击规格
             */
            clickSpec(index, row) {
                let title = this.skuTitle[index] === row.title ? "" : row.title;
                this.$set(this.skuTitle,index,title);
                let skuTitle = this.skuTitle.join(',');
                let skuKey   = common.arrayIndex(this.single.sku, skuTitle, 'title'); 
                let sku      = skuKey !== -1 ? this.single.sku[skuKey] : "";
                if (sku !== "") {
                    this.price = sku.sale_price;
                    this.stock = sku.stock;
                } else {
                    this.price = this.single.sale_price;
                    this.stock = this.single.stock;
                }
            }
        },
    });
</script>
{include file="$footer" /}